<!--vue模板-->
<template>
  <div>
    <div style="height: 40px; line-height: 40px; width: 1000px; margin: auto">
      产品信息
    </div>
    <el-table :data="tableData" style="width: 1000px; margin: auto">
      <el-table-column prop="name" label="产口名称" width="150" />
      <el-table-column prop="productdrawingnumber" label="图号" width="120" />
      <el-table-column prop="material" label="材质" width="150" />
      <el-table-column prop="num" label="件数" width="100" />
      <el-table-column prop="singleweight" label="单重" width="80" />
      <el-table-column prop="price" label="单价" width="80" />
      <el-table-column prop="categoryName" label="产品分类" />
    </el-table>
    <div style="width: 1000px; margin: auto">
      <el-row>
        <el-col :span="4">总重量</el-col>
        <el-col :span="4">{{ totalWeight }}</el-col>
        <el-col :span="4">总金额</el-col>
        <el-col :span="4">{{ totalMoney }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount, computed } from "vue";
import { useRoute } from "vue-router";
import { getDetail } from "@/api/inquiryDetail.js";
//获取路由信息
const route = useRoute();

const tableData = ref([]);

//总重量
let totalWeight = computed(() => {
  let total = 0;
  tableData.value.forEach(el => {
    total += el.num * el.singleweight;
  });
  return total;
});
//总金额
let totalMoney = computed(() => {
  let total = 0;
  tableData.value.forEach(el => {
    total += el.num * el.price;
  });
  return total;
});
/**
 * 根据产品明细id查询相关信息
 * @param id
 */
async function query(id) {
  let res = await getDetail(id);
  if (res.code == 200) {
    tableData.value.push(res.data);
  }
}

onBeforeMount(() => {
  let id = route.query.id;
  query(id);
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>
